<template>
  <div>
    <div class="wrapper">
      <div class="title">
        <Select>
          <!-- 订阅 -->
          <template v-slot:love>
            <div class="love">
              <span><img src="../assets/images/星星.png" alt="" /></span>
              <span>订阅</span>
              <span>({{ $store.state.select_acchor_data.subCount }})</span>
            </div>
          </template>

          <!-- 简介 -->
          <template v-slot:introduce>
            <div class="el-icon-caret-bottom" @click="show_fn"></div>
            <div
              class="introduce"
              :style="
                show ? '-webkit-line-clamp: 5' : '-webkit-line-clamp: 1000'
              "
            >
              <div v-if="$store.state.select_acchor_data.desc">
                <div
                  class="wenzi"
                  v-for="(item, index) in $store.state.select_acchor_data.desc"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </template>
        </Select>
      </div>
      <!-- 节目 订阅 按钮 -->
      <div class="table">
        <div class="">
          <span class="name">节目</span>
          <span class="count"
            >({{ $store.state.select_acchor_program_data.count }})</span
          >
        </div>
        <!-- <div class="active">
          <span class="name">订阅者</span>
          <span class="count">(1212)</span>
        </div> -->
      </div>
      <!-- 排序 -->
      <div class="sorting">
        <div class="count">
          共{{ $store.state.select_acchor_program_data.count }}期
        </div>
        <div class="sorting_s">
          <span class="order">排序</span>
          <span
            class="positive_order"
            :class="asc ? '' : 'active'"
            @click="positive_order_fn()"
            >正序</span
          >
          <span
            class="inverted_order"
            :class="asc ? 'active' : ''"
            @click="inverted_order_fn()"
            >倒序</span
          >
        </div>
      </div>
      <!-- 节目的集合 -->
      <div class="table_list">
        <!-- 每一项 -->
        <div
          class="list"
          v-for="(item, index) in $store.state.select_acchor_program_data
            .programs"
          :key="index"
          @click="select_acchor_program_play_fn(item.id)"
          :class="
            item.mainSong.id == $store.state.musis_info.id ? 'active' : ''
          "
        >
          <!-- 下标 -->
          <div class="index">
            {{
              asc
                ? $store.state.select_acchor_program_data.count -
                  ((page - 1) * 30 + index)
                : index + 1 + (page - 1) * 30
            }}
          </div>
          <!-- 头像 -->
          <div class="img"><img :src="item.coverUrl" alt="" /></div>
          <!-- 歌名或者电台名 -->
          <div class="name">{{ item.name }}</div>
          <!-- 发布的时间 -->
          <div class="pub_time">{{ ymd(item.scheduledPublishTime) }}</div>
          <!-- 一首歌的时长 -->
          <div class="tiem_length">
            {{ hms(item.mainSong.bMusic.playTime) }}
          </div>
        </div>
      </div>

      <div class="fyq">
        <el-pagination
          :page-size="30"
          :pager-count="11"
          layout="prev, pager, next"
          :total="$store.state.select_acchor_program_data.count"
          @current-change="select_acchor_program_fn"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Select from "../components/Select.vue";
export default {
  name: "SelectAcchor",
  data() {
    return {
      // 判断正序倒序   flase为正序
      asc: false,
      // 存储在分页的第几页
      page: 1,
      // 显示 简介
      show: true,
    };
  },
  components: {
    Select,
  },
  created() {
    this.select_acchor_program_fn();
  },
  methods: {
    // 调用电台节目的接口   电台 - 节目   /dj/program
    select_acchor_program_fn(e) {
      console.log(this.$store.state.select_acchor_program_data.programs);

      this.page = e || this.page;
      console.log(this.page);
      this.axios({
        method: "get",
        url: "/dj/program",
        params: {
          rid: this.$store.state.select_acchor_data.id,
          limit: 30,
          offset: (this.page - 1) * 30,
          asc: this.asc,
        },
      })
        .then((res) => {
          console.log("res", res);
          this.$store.commit("select_acchor_program_data", res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 正序
    positive_order_fn() {
      this.asc = false;
      this.select_acchor_program_fn();
    },
    // 倒序
    inverted_order_fn() {
      this.asc = true;
      this.select_acchor_program_fn();
    },

    // 点击选择电台节目    电台 - 节目详情   /dj/program/detail
    select_acchor_program_play_fn(id) {
      this.axios({
        method: "get",
        url: "/dj/program/detail",
        params: {
          id,
        },
      })
        .then((res) => {
          let playtime = this.hms(res.data.program.mainSong.bMusic.playTime);
          console.log("我是电台节目详情的数据", res);
          let play_info = {
            picUrl: "",
            name: "",
            playTime: "",
            song: {
              alias: [],
              artists: [{ name: "" }],
            },
            id: "",
            type: "programDetail",
            description: "",
          };
          // 图片路劲
          play_info.picUrl = res.data.program.coverUrl;
          // 电台名
          play_info.name = res.data.program.name;
          // 播放的时长
          play_info.playTime = playtime;
          // 这里是判断是否电视剧的主题曲,
          play_info.song.alias[0] = "";
          // 这个是电台作者的名字
          play_info.song.artists[0].name = res.data.program.dj.brand;
          // 该电台音乐的id
          play_info.id = res.data.program.mainSong.id;
          // 将处理好的数据给program.play_info
          res.data.program.play_info = play_info;
          // 电台的介绍
          play_info.description = res.data.program.description;

          // 发送id给vuex的id
          this.$store.commit("src_id", play_info.id);
          // 正在播放的音乐
          this.$store.commit("musis_info", res.data.program.play_info);
          // 播放列表
          this.$store.commit("play_list", res.data.program.play_info);
          // 调用vuexactions的异步操作
          this.$store.dispatch("get_src");

          console.log(this.$store.state.play_list);
          // console.log(this.$store.state.play_list[34].song.alias[0]);
          // console.log(this.$store.state.play_list[34].song.artists[0].name);
        })
        .catch((err) => {
          console.log("是不是我的错", err);
        });
    },

    // 格式化时间
    // 年月日
    ymd(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D;
      return strDate;
    },
    // 时分秒
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },

    // // 显示 简介
    show_fn() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less" scoped>
.table {
  display: flex;
  margin-top: 20px;
  div {
    cursor: pointer;
    margin-left: 10px;

    .name {
      font-size: 20px;
    }
    .count {
      color: #666;
      font-size: 14px;
    }
  }
  .active {
    font-weight: bolder;
    color: black;
    border-bottom: 4px solid #e4393c;
  }
}

.wrapper {
  overflow-y: auto;
  height: 670px;
}
.table_list {
  .list {
    // background: blanchedalmond;
    display: flex;
    height: 100px;
    text-align: center;
    line-height: 100px;
    cursor: default;
    .index {
      flex: 0 10%;
      //   background: blue;
    }
    .img {
      flex: 0 10%;
      //   background: blueviolet;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 80px;
        // height: 100%;
        border-radius: 5px;
      }
    }
    .name {
      flex: 0 50%;
      //   background: cadetblue;
      text-align: initial;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .pub_time {
      flex: 0 20%;
      //   background: chartreuse;
    }
    .tiem_length {
      flex: 0 10%;
      //   background: chocolate;
    }
    &:nth-child(2n + 1) {
      background: #f0f0f0;
    }
    &:nth-child(2n) {
      background: #fff;
    }
    &:hover {
      background: #ccc;
    }
  }
  .active {
    color: #e4393c !important;
  }
}
.sorting {
  margin-top: 15px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;

  color: #666;
  .sorting_s {
    padding-right: 20px;
    cursor: default;
    .order {
      margin-right: 20px;
    }
    .inverted_order,
    .positive_order {
      padding: 5px 10px;
      cursor: pointer;
    }
    .active {
      background: #e4393c;
      color: #fff;
    }
  }
}
.fyq {
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // margin-top: 20px;
  .el-pagination {
    display: flex;
    justify-content: center;
    /deep/.el-pager li.active {
      color: #e4393c;
    }
    /deep/ .el-pager li:hover {
      color: #e4393c;
    }
    /deep/ button:hover {
      color: #e4393c;
    }
  }
}
</style>